<template>
  <div>
    <el-row align="middle" class="pt-20">
      <el-col>
        <p class="main_title">{{ $t('menu.SPONSOR') }}</p>
      </el-col>
    </el-row>
    <div style="display: flex; margin: 15px;0;15px;0">
      <div style="flex: 0 0 70%;padding-right: 5px;padding-left: 5px;" class="mb-4">
        <el-row :gutter="12">
          <el-col :span="2" class="hori-cond"><label class="form-label">来源</label></el-col>
          <el-col :span="3">
            <el-select v-model="searchData.webid" placeholder="全部" @change="doList" clearable filterable>
              <el-option v-for="item in searchWebs" :key="item.webid" :label="item.webname" :value="item.webid">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2" class="hori-cond"><label class="form-label">省份</label></el-col>
          <el-col :span="3">
            <el-select v-model="searchData.provid" placeholder="全部" @change="doList" clearable filterable>
              <el-option v-for="item in searchProvs" :key="item.provid" :label="item.provname" :value="item.provid">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2" class="hori-cond"><label class="form-label">状态</label></el-col>
          <el-col :span="3">
            <el-select v-model="searchData.bizstatus" placeholder="全部" @change="doList" clearable filterable>
              <el-option v-for="item in statuses" :key="item.key" :label="item.value" :value="item.key">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-input placeholder="请输入主办方ID\名称" v-model="searchData.term" class="input-with-select" clearable @change="doList">
              <el-button slot="append" icon="el-icon-search" @click="doList">查询</el-button>
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div style="flex: 0 0 25%;padding-right: 5px;padding-left: 5px;" class="mb-4">
        <div style="float:right">
          <el-button size="medium" type="primary" @click="batchBind">批量绑定</el-button>
          <el-button size="medium" type="primary" v-if="userStat === 1" @click="addSponsor">{{ $t('button.ADDSPONSOR') }} <i class="el-icon-circle-plus-outline"></i>
          </el-button>
          <el-button size="medium" type="primary" v-if="userStat === 1" @click="exportList">导出列表</el-button>
        </div>
      </div>
    </div>

    <div class="table_container">
      <el-table :data="sponsors" :header-cell-style="boxheader" :row-style="{height:0+'px'}" :cell-style="{padding:0+'px'}" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column min-width="60px" align="center" prop="orgid" :label="$t('org.ORGID')">
          <template slot-scope="scope">
            <span>{{ scope.row.orgid}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100px" align="center" :label="$t('org.ORGNAME')">
          <template slot-scope="scope">
            <span>{{ scope.row.orgname}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100px" align="center" label="别名">
          <template slot-scope="scope">
            <span>{{ scope.row.truename}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="60px" align="center" label="真实ID">
          <template slot-scope="scope">
            <span>{{ scope.row.trueid}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100px" align="center" label="绑定的主办方名称">
          <template slot-scope="scope">
            <span>{{ scope.row.bindname}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="60px" align="center" :label="$t('org.WEBNAME')">
          <template slot-scope="scope">
            <span>{{ scope.row.webname}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="30px" align="center" :label="$t('org.CATEGORY')">
          <template slot-scope="scope">
            <span>{{ transCategory(scope.row.category) }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="30px" align="center" :label="$t('org.PROV')">
          <template slot-scope="scope">
            <span>{{ scope.row.provname}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="150px" align="center" label="首页">
          <template slot-scope="scope">
            <span>{{ scope.row.firstpage}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="60px" align="center" :label="$t('org.STATUS')">
          <template slot-scope="{}" slot="header">
            <span>状态</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <i class="el-icon-question" style="font-size: 14px; vertical-align: middle;"></i>
              <div slot="content">
                <p>状态说明：</p>
                <p>Z开头的公棚状态仅仅影响是否抓取公告</p>
                <p>非Z开头的正式主办方状态影响成绩抓取、收鸽清单抓取</p>
              </div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <span v-if="scope.row.bizstatus === 1">启动</span>
            <el-tag type="danger" effect="dark" v-if="scope.row.bizstatus === 0">停止</el-tag>
          </template>
        </el-table-column>
        <el-table-column min-width="80px" align="center" label="主机">
            <template slot-scope="scope">
              <span>{{ scope.row.hostname }}</span>
            </template>
        </el-table-column>
        <el-table-column min-width="60px" align="center" label="管理员">
          <template slot-scope="scope">
            <span>{{ scope.row.manageusername}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="120px" align="center" :label="$t('common.OPER')" v-if="userStat === 1">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.orgid.charAt(0) != 'Z'" @click="bindOrg(scope.row)">绑定</el-button>
            <el-button type="text" @click="updateOrg(scope.$index, scope.row)">{{ $t('common.UPDATE') }}</el-button>
            <el-button type="text" @click="deleteOrg(scope.row)">{{ $t('common.DELETE') }}</el-button>
            <el-button type="text" @click="updateStatus(scope.row)">{{ scope.row.bizstatus === 1?'停止':'启动' }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="col-sm pt-3 text-sm-left" style="text-align:right; display: contents">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchData.curpage" :page-sizes="[5, 10, 20, 50]"
          :page-size="searchData.pagesize" layout="total, sizes,  pager, jumper" :total="searchData.total">
        </el-pagination>
      </div>
    </div>

    <el-dialog :title="$t('button.ADDSPONSOR')" :visible.sync="addVisible" :width="width" :close-on-click-modal="false">
      <!-- :show-close="false" -->
      <img :src="iconImg" class="enlarge" @click="enlarge" width="12px" height="12px" />
      <el-form :model="addform" :rules="rules" ref="addform" label-width="20%">
        <el-form-item :label="$t('org.ORGID')" prop="orgid" required style="padding-bottom:15px">
          <el-input v-model="addform.orgid" :placeholder="$t('tips.ENTER.ORGID')"></el-input>
        </el-form-item>
        <el-form-item label="主办方名称" prop="orgname" style="padding-bottom:15px">
          <el-input v-model="addform.orgname" :placeholder="$t('tips.ENTER.ORGNAME')"></el-input>
        </el-form-item>
        <el-form-item label="别名" prop="truename">
          <el-input v-model="addform.truename" placeholder="请输入别名"></el-input>
        </el-form-item>
        <el-form-item :label="$t('org.WEBNAME')" prop="webid">
          <el-select v-model="addform.webid" :placeholder="$t('valid.WEBID.NOTNULL')" class="inline" clearable filterable>
            <el-option v-for="item in webs" :key="item.webid" :label="item.webname" :value="item.webid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('org.CATEGORY')" style="clear:both" prop="category">
          <el-select v-model="addform.category" :placeholder="$t('valid.CATEGORY.NOTNULL')" class="inline" clearable filterable>
            <el-option v-for="item in categorys" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('org.PROV')" style="clear:both" prop="provid">
          <el-select v-model="addform.provid" :placeholder="$t('valid.PROV.NOTNULL')" class="inline" clearable filterable>
            <el-option v-for="item in provs" :key="item.provid" :label="item.provname" :value="item.provid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="首页" prop="firstpage">
          <el-input v-model="addform.firstpage" placeholder="请输入首页信息"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align:center!important;">
        <el-button class="cancel_button" @click="addVisible = false">{{ $t('common.CANCEL') }}</el-button>
        <el-button class="confirm_button" @click="addSubmit('addform')">{{ $t('common.CONFIRM2') }}</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="$t('button.UPDATESPONSOR')" :visible.sync="updateVisible" :width="width" :close-on-click-modal="false">
      <img :src="iconImg" class="enlarge" @click="enlarge" width="12px" height="12px" />
      <el-form :model="updateform" :rules="updateRules" ref="updateform" label-width="20%">
        <el-form-item v-if="updateform.orgid.charAt(0) == 'Z'" :label="$t('org.ORGID')" style="clear:both" prop="trueid">
          <el-select v-model="updateform.trueid" placeholder="请选择匹配的主办方" class="inline" clearable filterable
          @change="changeOrgname">
            <el-option v-for="item in orgsels" :key="item.orgid" :label="item.orgid + '_' + item.orgname" :value="item.orgid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主办方名称" prop="orgname" style="padding-bottom:15px">
          <el-input v-model="updateform.orgname" :placeholder="$t('tips.ENTER.ORGNAME')"></el-input>
        </el-form-item>
        <el-form-item label="别名" prop="truename">
          <el-input v-model="updateform.truename" placeholder="请输入别名"></el-input>
        </el-form-item>
        <el-form-item :label="$t('org.WEBNAME')" prop="webid">
          <el-select v-model="updateform.webid" :placeholder="$t('valid.WEBID.NOTNULL')" class="inline">
            <el-option v-for="item in webs" :key="item.webid" :label="item.webname" :value="item.webid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('org.CATEGORY')" style="clear:both" prop="category">
          <el-select v-model="updateform.category" :placeholder="$t('valid.CATEGORY.NOTNULL')" class="inline">
            <el-option v-for="item in categorys" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('org.PROV')" style="clear:both" prop="provid">
          <el-select v-model="updateform.provid" :placeholder="$t('valid.PROV.NOTNULL')" class="inline">
            <el-option v-for="item in provs" :key="item.provid" :label="item.provname" :value="item.provid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="首页" prop="firstpage">
          <el-input v-model="updateform.firstpage" placeholder="请输入首页信息"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align:center!important;">
        <el-button class="cancel_button" @click="updateVisible = false">{{ $t('common.CANCEL') }}</el-button>
        <el-button class="confirm_button" @click="updateSubmit('updateform')">{{ $t('common.CONFIRM2') }}</el-button>
      </span>
    </el-dialog>

    <el-dialog title="绑定管理员" :visible.sync="bindVisible" width="400px" :close-on-click-modal="false">
      <el-form :model="bindData" ref="bindform" label-width="20%">
        <el-form-item label="管理员">
          <el-select v-model="bindData.manageuser" class="inline">
            <el-option v-for="item in manageusers" :key="item.userid" :label="item.truename" :value="item.userid">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="text-align:center!important;">
        <el-button class="cancel_button" @click="bindVisible = false">{{ $t('common.CANCEL') }}</el-button>
        <el-button class="confirm_button" @click="bindSubmit()">{{ $t('common.CONFIRM2') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import sponsorService from "@/service/sponsorService";
import webService from "@/service/webService";
import provinceService from "@/service/provinceService";
import adminService from "@/service/adminService";

import enlargeImg from "@/assets/images/icon_2.png";
import narrowImg from "@/assets/images/icon_3.png";
import i18n from "@/lang";
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
import { mapGetters } from "vuex";
import { getRoleId } from "@/utils/auth";
export default {
  name: "SponsorList",
  data() {
    var checkOrgId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入主办方id"));
      }
      setTimeout(() => {
          callback();
      }, 50);
    };
    return {
      boxheader: {
        // background: '#eef1f6',
        color: "#606266",
        fontWeight: 800,
        borderBottom: "2px solid #EBEEF5",
      },
      searchData: {
        term: "",
        curpage: 1,
        pagesize: 10,
        orgid: "",
        webid: "",
        provid: "",
        status: "",
        total: 0,
      },
      searchProvs: [{ provid: "", provname: "全部" }],
      searchWebs: [{ webid: "", webname: "全部" }],
      sponsors: [],
      iconImg: enlargeImg,
      width: "600px",
      addVisible: false,
      addform: {
        orgid: "",
        orgname: "",
        truename: "",
        webid: "",
        category: "",
        provid: "",
      },
      updateVisible: false,
      updateform: {
        orgid: "",
        orgname: "",
        truename: "",
        webid: "",
        category: "",
        provid: "",
        firstpage: "",
      },
      orgsels: [],
      webs: [],
      provs: [],
      categorys: [
        { key: 1, value: "公棚" },
        { key: 2, value: "协会" },
        { key: 3, value: "俱乐部" },
      ],
      statuses: [
        { key: "", value: "全部" },
        { key: "0", value: "停止" },
        { key: "1", value: "启动" },
      ],
      rules: {
        orgid: [{ validator: checkOrgId, trigger: "blur" }],
        orgname: [
          {
            required: true,
            message: i18n.t("valid.ORGNAME.NOTNULL"),
            trigger: "blur",
          },
        ],
        webid: [
          {
            required: true,
            message: i18n.t("valid.WEBID.NOTNULL"),
            trigger: "blur",
          },
        ],
        category: [
          {
            required: true,
            message: i18n.t("valid.CATEGORY.NOTNULL"),
            trigger: "blur",
          },
        ],
        provid: [
          {
            required: true,
            message: i18n.t("valid.PROV.NOTNULL"),
            trigger: "blur",
          },
        ],
      },
      updateRules: {
        orgname: [
          {
            required: true,
            message: i18n.t("valid.ORGNAME.NOTNULL"),
            trigger: "blur",
          },
        ],
        webid: [
          {
            required: true,
            message: i18n.t("valid.WEBID.NOTNULL"),
            trigger: "blur",
          },
        ],
        category: [
          {
            required: true,
            message: i18n.t("valid.CATEGORY.NOTNULL"),
            trigger: "blur",
          },
        ],
        provid: [
          {
            required: true,
            message: i18n.t("valid.PROV.NOTNULL"),
            trigger: "blur",
          },
        ],
      },
      multipleSelection: [],
      bindVisible: false,
      bindData: {
        idlist: [],
        manageuser: "",
      },
      manageusers: [],
    };
  },
  watch: {},
  mounted: function () {
    // localStorage.setItem('active', 3)
    // commit('SET_ACTIVE', 3)
    this.$store.dispatch("setActive", "3").then(() => {
      // this.$root.eventBus.$emit('exit')
    });
  },
  created() {
    sponsorService.listOrganizers({ curpage: 1, pagesize: 10 }).then((res) => {
      if (res && res.data.result === 0) {
        this.sponsors = res.data.data;
        this.searchData.total = res.data.total;
      }
    });
    webService.listWebs({ curpage: 1, pagesize: 9999 }).then((res) => {
      if (res && res.data.result === 0) {
        for (let item of res.data.data) {
          this.searchWebs.push(item);
        }
      }
    });
    provinceService
      .listProvinces({ curpage: 1, pagesize: 9999 })
      .then((res) => {
        if (res && res.data.result === 0) {
          for (let item of res.data.data) {
            this.searchProvs.push(item);
          }
        }
      });
  },
  destroyed() {},
  computed: {
    ...mapGetters(["userid", "userStat"]),
  },
  methods: {
    exportList() {
      sponsorService
        .listOrganizers({ curpage: 1, pagesize: 99999 })
        .then((res) => {
          if (res && res.data.result === 0) {
            let resList = [];
            let sponsors = res.data.data;
            for (let i = 0; i < sponsors.length; i++) {
              let item = sponsors[i];
              let temp = [];
              temp.主办方编号 = item.orgid;
              temp.名称 = item.orgname;
              temp.别名 = item.truename;
              temp.来源 = item.webname;
              temp.类型 = this.transCategory(item.category);
              temp.省份 = item.provname;
              temp.状态 = this.transStatus(item.status);
              temp.新增时间 = item.addtime;
              temp.修改时间 = item.updatetime;
              resList.push(temp);
            }
            const worksheet = XLSX.utils.json_to_sheet(resList);
            const workbook = {
              Sheets: { data: worksheet },
              SheetNames: ["data"],
            };
            const excelBuffer = XLSX.write(workbook, {
              bookType: "xlsx",
              type: "array",
            });
            this.saveAsExcelFile(excelBuffer, "主办方列表导出");
          }
        });
    },
    saveAsExcelFile(buffer, fileName) {
      const data = new Blob([buffer], {
        type:
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
      });
      FileSaver.saveAs(data, fileName + ".xls");
    },
    doList() {
      this.searchData.curpage = 1;
      this.listSponsor();
    },
    listSponsor() {
      sponsorService.listOrganizers(this.searchData).then((res) => {
        if (res && res.data.result === 0) {
          this.sponsors = res.data.data;
          this.searchData.total = res.data.total;
        }
      });
    },
    transStatus(data) {
      var statusname = "";
      switch (data) {
        case 0:
          statusname = "正常";
          break;
        case 1:
          statusname = "失效";
          break;
        default:
          break;
      }
      return statusname;
    },
    transCategory(data) {
      var categoryname = "";
      switch (data) {
        case 1:
          categoryname = "公棚";
          break;
        case 2:
          categoryname = "协会";
          break;
        case 3:
          categoryname = "俱乐部";
          break;
        default:
          break;
      }
      return categoryname;
    },
    addSponsor() {
      webService.listWebs({ curpage: 1, pagesize: 9999 }).then((res) => {
        if (res && res.data.result === 0) {
          this.webs = res.data.data;
        }
      });
      provinceService
        .listProvinces({ curpage: 1, pagesize: 9999 })
        .then((res) => {
          if (res && res.data.result === 0) {
            this.provs = res.data.data;
          }
        });
      this.addVisible = true;
      this.addform = {
        orgid: "",
        orgname: "",
        webid: "",
        category: "",
        provid: "",
        firstpage: "",
      };
    },
    addSubmit(addform) {
      this.$refs[addform].validate((valid) => {
        console.log('11--' + valid)
        let dataInfo = {
          orgid: this.addform.orgid,
          orgname: this.addform.orgname,
          truename: this.addform.truename,
          webid: this.addform.webid,
          category: this.addform.category,
          provid: this.addform.provid,
          firstpage: this.addform.firstpage,
        };
        if (valid) {
          sponsorService.addOrganizer(dataInfo).then((res) => {
            if (res && res.data.result === 0) {
              this.$message({
                message: i18n.t("tips.ORG.ADDSUCCESS"),
                type: "success",
              });
              this.addVisible = false;
              this.listSponsor();
            }
          });
        } else {
          return false;
        }
      });
    },
    updateOrg(index, row) {
      sponsorService.matchOrganizers({}).then((res) => {
        if (res && res.data.result === 0) {
          this.orgsels = res.data.data;
        }
      });
      webService.listWebs({ curpage: 1, pagesize: 9999 }).then((res) => {
        if (res && res.data.result === 0) {
          this.webs = res.data.data;
        }
      });
      provinceService
        .listProvinces({ curpage: 1, pagesize: 9999 })
        .then((res) => {
          if (res && res.data.result === 0) {
            this.provs = res.data.data;
          }
        });
      this.updateVisible = true;
      this.updateform = {
        orgid: row.orgid,
        orgname: row.orgname,
        truename: row.truename,
        webid: row.webid,
        category: row.category,
        provid: String(row.provid),
        firstpage: row.firstpage,
      };
    },
    changeOrgname() {
      // this.orgsels.forEach((item) => {
      //     if (item.orgid == this.updateform.trueid) {
      //       this.updateform.orgname = item.orgname
      //       return
      //     }
      // });
    },
    updateSubmit(updateform) {
      this.$refs[updateform].validate((valid) => {
        if (valid) {
          sponsorService.updateOrganizer(this.updateform).then((res) => {
            if (res && res.data.result === 0) {
              this.$message({
                message: i18n.t("tips.ORG.UPDATESUCCESS"),
                type: "success",
              });
              this.updateVisible = false;
              this.listSponsor();
            }
          });
        } else {
          return false;
        }
      });
    },
    updateStatus(sponsor) {
      // console.log(sponsor.bizstatus)
      sponsorService
        .updateStatus({
          orgid: sponsor.orgid,
          bizstatus: sponsor.bizstatus === 1 ? "0" : "1",
        })
        .then((res) => {
          if (res && res.data.result === 0) {
            this.$message({
              message: sponsor.bizstatus === "1" ? "停止成功" : "启动成功",
              type: "success",
            });
            this.listSponsor();
          }
        });
    },
    deleteOrg(row) {
      this.$confirm("是否主办方 " + row.orgname + " ?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let dataInfo = {
            orgid: row.orgid,
          };
          sponsorService.deleteOrganizer(dataInfo).then((res) => {
            if (res && res.data.result === 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.listSponsor();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    batchBind() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择待绑定的主办方");
        return;
      }
      this.manageusers = [];
      adminService.list({ curpage: 1, pagesize: 9999 }).then((res) => {
        if (res && res.data.result === 0) {
          this.manageusers = res.data.data;
        }
      });
      this.bindVisible = true;
      this.bindData = {
        idlist: [],
        manageuser: "",
      };
      this.multipleSelection.forEach((item) => {
        this.bindData.idlist.push(item.orgid);
      });
    },
    bindOrg(row) {
      this.manageusers = [];
      adminService.list({ curpage: 1, pagesize: 9999 }).then((res) => {
        if (res && res.data.result === 0) {
          this.manageusers = res.data.data;
        }
      });
      this.bindVisible = true;
      this.bindData = {
        idlist: [row.orgid],
        manageuser: "",
      };
    },
    bindSubmit() {
      sponsorService.updateManage(this.bindData).then((res) => {
        if (res && res.data.result === 0) {
          this.$message({
            type: "success",
            message: "绑定成功!",
          });
          this.bindVisible = false;
          this.listSponsor();
        }
      });
    },
    enlarge() {
      if (this.width === "600px") {
        this.width = "1000px";
        this.iconImg = narrowImg;
      } else {
        this.width = "600px";
        this.iconImg = enlargeImg;
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchData.pagesize = val;
      console.log(this.searchData.pagesize, "this.searchData.pagesize");
      this.listSponsor();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchData.curpage = val;
      console.log(this.searchData.curpage, "this.searchData.curpage");
      this.listSponsor();
    },
  },
};
</script>

<style>
.main_title {
  color: #343434;
  font-size: 18px;
  margin: 7px 0 0 0;
}

.inline {
  display: inline;
}
</style>
